<!-- 网站 -->
<div class="container">
  <nz-card
    [nzActions]="isLogin ? [actionSetting, actionEdit, actionEllipsis] : [actionSetting, actionEdit]"
    nzSize="small"
    nzHoverable
    nzType="inner"
  >
    <div class="rate">
      <nz-rate
        [ngModel]="dataSource.rate"
        [nzDisabled]="!isLogin"
        nzAllowHalf
        (ngModelChange)="onRateChange($event)"
      >
      </nz-rate>
    </div>
    <a [href]="dataSource.url" target="_blank" rel="noreferer noopener">
      <nz-card-meta
        [nzTitle]="title"
        [nzAvatar]="avatarTemplate"
      >
      </nz-card-meta>

      <div style="opacity: 0;height: 10px;">&nbsp;</div>
      <pre class="desc dark-text" [innerHTML]="dataSource.desc"></pre>
    </a>

    <div style="margin-top: 15px;">
      <nz-tag *ngFor="let key of objectKeys(dataSource.urls)" [nzColor]="tagMap[key].color || '#2db7f5'">
        <a [href]="dataSource.urls[key]" target="_blank">{{ key }}</a>
      </nz-tag>
    </div>
  </nz-card>

  <ng-template #title>
    <div [innerHTML]="dataSource.name" class="title"></div>
  </ng-template>
  <ng-template #avatarTemplate>
    <app-logo [src]="dataSource.icon" [name]="dataSource.name"></app-logo>
  </ng-template>
  <ng-template #actionSetting>
    <div nz-tooltip [nzTooltipTitle]="copyUrlDone ? $t('_copySuccess') : $t('_copyUrl')">
      <i
        nz-icon
        [nzType]="copyUrlDone ? 'check' : 'copy'"
        nzTheme="outline"
        (click)="copyUrl($event, 2)"
        (mouseout)="copyMouseout()"
      >
      </i>
    </div>
  </ng-template>
  <ng-template #actionEdit>
    <div nz-tooltip [nzTooltipTitle]="copyPathDone ? $t('_copySuccess') : $t('_shareWeb')">
      <i
        nz-icon
        [nzType]="copyPathDone ? 'check' : 'share-alt'"
        nzTheme="outline"
        (click)="copyUrl($event, 1)"
        (mouseout)="copyMouseout()"
      >
      </i>
    </div>
  </ng-template>
  <ng-template #actionEllipsis>
    <i nz-icon nzType="ellipsis" nz-dropdown [nzDropdownMenu]="menu" *ngIf="isLogin"></i>

    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <li nz-menu-item (click)="toggleCreateModal(); detail = dataSource">{{ $t('_edit') }}</li>
        <li nz-menu-item (click)="handleMove()">{{ $t('_move') }}</li>
        <a
          nz-popconfirm
          nzPopconfirmPlacement="rightTop"
          nzOkType="danger"
          [nzPopconfirmTitle]="$t('_confirmDel')"
          nzPopconfirmPlacement="bottom"
          (nzOnConfirm)="confirmDel($event)"
        >
          <li nz-menu-item nzDanger>{{ $t('_del') }}</li>
        </a>
      </ul>
    </nz-dropdown-menu>
  </ng-template>
</div>

<app-create-web
  *ngIf="showCreateModal"
  [visible]="showCreateModal"
  (onCancel)="toggleCreateModal()"
  (onOk)="handleUpdateSiteOk($event)"
  [detail]="dataSource"
>
</app-create-web>

<app-move-site
  #moveSite
  *ngIf="showMoveModal"
  [indexs]="indexs"
  [visible]="showMoveModal"
  (onCancel)="toggleMoveModal()"
>
</app-move-site>
